import './SelectLockScreen.scss'
import { Badge } from 'antd'
import { useState } from 'react'


import LockScreenA01 from '../../View/LockScreen/A01'
import LockScreenA02 from '../../View/LockScreen/A02'
import LockScreenA03 from '../../View/LockScreen/A03'
import LockScreenA04 from '../../View/LockScreen/A04'
import LockScreenA05 from '../../View/LockScreen/A05'
import LockScreenA06 from '../../View/LockScreen/A06'
import LockScreenA07 from '../../View/LockScreen/A07'
import LockScreenA08 from '../../View/LockScreen/A08'
import LockScreenA09 from '../../View/LockScreen/A09'
import LockScreenA10 from '../../View/LockScreen/A10'
import LockScreenA11 from '../../View/LockScreen/A11'
import LockScreenA12 from '../../View/LockScreen/A12'
import LockScreenA13 from '../../View/LockScreen/A13'
import LockScreenA14 from '../../View/LockScreen/A14'
import LockScreenA15 from '../../View/LockScreen/A15'
import LockScreenA16 from '../../View/LockScreen/A16'
import LockScreenA17 from '../../View/LockScreen/A17'
import LockScreenA18 from '../../View/LockScreen/A18'
import LockScreenA19 from '../../View/LockScreen/A19'
import LockScreenA20 from '../../View/LockScreen/A20'
import LockScreenA21 from '../../View/LockScreen/A21'
import LockScreenA22 from '../../View/LockScreen/A22'
import LockScreenA23 from '../../View/LockScreen/A23'
import LockScreenA24 from '../../View/LockScreen/A24'
import LockScreenA25 from '../../View/LockScreen/A25'


const LockScreenMapping = {
    LockScreenA01, LockScreenA02, LockScreenA03, LockScreenA04, LockScreenA05,
    LockScreenA06, LockScreenA07, LockScreenA08, LockScreenA09, LockScreenA10,
    LockScreenA11, LockScreenA12, LockScreenA13, LockScreenA14, LockScreenA15,
    LockScreenA16, LockScreenA17, LockScreenA18, LockScreenA19, LockScreenA20,
    LockScreenA21, LockScreenA22, LockScreenA23, LockScreenA24, LockScreenA25,
}

const SelectLockScreen = ({ data, ModalEvent }) => {
    const [Active, setActive] = useState(data)
    return (
        <div className='SelectLockScreen'>
            {Object.keys(LockScreenMapping).map(key => {
                const Template = LockScreenMapping[key]
                if (key === `LockScreen${Active}`) {
                    return (
                        <Badge.Ribbon key={key} text="当前动画" >
                            <div className='Amination'>
                                <Template />
                            </div>
                        </Badge.Ribbon>
                    )
                }
                return (
                    <div
                        key={key}
                        className='Amination'
                        onClick={() => {
                            const active = key.slice(-3)
                            setActive(active)
                            ModalEvent.emit({ type: 'SelectLock', data: active })
                        }}
                    >
                        <Template />
                    </div>
                )
            })}
        </div>
    );
};

export default SelectLockScreen;